<template>
  <div class="moreTool" @click="bodyClick">
    <div class="container">
      <loading :isLoading="isLoading">
        <div class="canvasBox transparent" ref="canvasBox">
          <canvas id="copyCan" ref="copyCan" style="display:none;"></canvas>
          <canvas id="noBgCan" ref="noBgCan"></canvas>
          <div 
            style="display:none;"
            ref="toolSize"
            class="tool-size" 
          >
            <div 
              ref="toolSizeSon"
              class="tool-size-slider" 
            ></div>
          </div>
        </div>
      </loading>
    </div>
    <div class="operation">
      <div class="footer">
        <div class="buttonInfo">
          <!-- 工具选择 showTool-->
          <van-popup
            position="bottom"
            :style="{ paddingBottom : '55px' }"
            v-model="showPopup.showTool"
          >
            <div class="popup-tool">
              <template v-for="tool in toolData">
                <span
                  :key="tool.id"
                  class="popup-tool-item"
                  @click.stop="tool.fun(`${tool.popup}`)"
                >
                <div class="cell-container">
                  <i class="iconfont" v-html="tool.icon"></i>
                  <span style="font-size:14px;">{{ tool.title }}</span>
                </div>
                </span>
              </template>
            </div>
          </van-popup>
          <!-- 背景样式选择 showBgStyle -->
          <van-popup
            position="bottom"
            :overlay="false"
            :style="{ paddingBottom : '55px' }"
            v-model="showPopup.showBgStyle"
          >
            <div class="bg-style-box">
              <div
                class="bg-style"
                v-for="color in bgColorData"
                :key="color.id"
                @click.stop="changeBgColor(color)"
              >
                <div class="bg" :style="`background:${color.color};`"></div>
                <span>{{ color.title }}</span>
              </div>
            </div>
          </van-popup>
          <!-- 调整边缘 showAdjustEdge -->
          <van-popup position="bottom" :overlay="false" v-model="showPopup.showAdjustEdge"  style="overflow:unset">
            <div class="tool-ajust-box">
              <div class="pen-adjust" ref="penAdjust1">
                <div>
                  <span>大小</span><van-slider v-model="penConfig.lineWidth" :min="1" :max="50" @input="showPenStyle" @change="changePen" />
                </div>
                <div>
                  <span>柔边</span><van-slider v-model="penConfig.shadowBlur" :max="50" @input="showPenStyle" @change="changePen" />
                </div>
              </div>
              <span @click="cancel">取消</span>
              <div style="display: flex; flex-direction: row;">
                <span @click="revoke"> <i class="iconfont tool-icon">&#xe601;</i> </span>
                <span style="margin:0px 24px">
                  <van-stepper v-model="rangeSize" min="-0.5" max="0.5" step="0.1" disable-input @change="stepperChange"/>
                </span>
                <span @click="popupPen(1)"> <i class="iconfont tool-icon">&#xe648;</i> </span>
              </div>
              <span @click="confirm">确定</span>
            </div>
          </van-popup>
          <!--  橡皮擦工具 showEraser -->
          <van-popup position="bottom" :overlay="false" v-model="showPopup.showEraser" style="overflow:unset">
            <div class="tool-ajust-box">
              <div class="pen-adjust" ref="penAdjust2">
                <div>
                  <span>大小</span><van-slider v-model="penConfig.lineWidth" :min="1" :max="50" @input="showPenStyle" @change="changePen" />
                </div>
                <div>
                  <span>柔边</span><van-slider v-model="penConfig.shadowBlur" :max="50" @input="showPenStyle" @change="changePen" />
                </div>
              </div>
              <span @click="cancel">取消</span>
              <div>
                <span @click="revoke" style="padding:0 15px;"> <i class="iconfont tool-icon">&#xe601;</i> </span>
                <span @click="popupPen(2)" style="padding:0 15px;" ><i class="iconfont tool-icon">&#xe648;</i> </span>
              </div>
              <span @click="confirm">确定</span>
            </div>
          </van-popup>
          <!--  边缘平滑 showEdge -->
          <van-popup
            position="bottom"
            :overlay="false"
            :style="{ paddingBottom : '55px' }"
            v-model="showPopup.showEdge"
          >
            <div class="tool-edge-box">
              <div>
                <span>虚化程度</span>
                <van-slider v-model="lineWidth" button-size="20px" @change="edgeBlur" :max="20" />
              </div>
              <div>
                <span>模糊半径</span>
                <van-slider v-model="radius" button-size="20px" @change="edgeBlur" :max="20" />
              </div>
              <div>
                <span>模糊程度</span>
                <van-slider
                  v-model="sigma"
                  button-size="20px"
                  @change="edgeBlur"
                  :min="1"
                  :max="5"
                />
              </div>
            </div>
          </van-popup>
          <!-- 调节亮度 showLight -->
          <van-popup
            position="bottom"
            :overlay="false"
            :style="{ paddingBottom : '55px' }"
            v-model="showPopup.showLight"
            v-if="0"
          >
            <div class="tool-ajust-box">敬请期待</div>
          </van-popup>
        </div>
        <div class="buttonList" v-show="!popupLock">
          <span>
            <span name="bgSelect" is-link @click.stop="popupChange('showBgStyle')">背景</span>
          </span>
          <span>
            <span neme="toolBox" is-link @click.stop="popupChange('showTool')">工具</span>
          </span>
          <span @click="exportCanShow">导出</span>
        </div>
      </div>
    </div>
    <van-dialog
      v-model="exportShow"
      title="证件照导出"
      show-cancel-button
      @confirm="exportCan(exportImgData)"
      @cancel="exportShow = false"
      :style="{ width : '92vw' }"
    >
      <div class="exportCard">
        <div>
          <i class="iconfont" style="font-size:16px; padding-right:10px">&#xe715;</i>
          <input type="text" class="exportInput" v-model="exportConfig.imgName" />
        </div>
        <div>
          <i class="iconfont" style="font-size:18px; padding-right:10px">&#xe6a1;</i>
          <span>格式</span>
          <input type="radio" v-model="exportConfig.type" value="png" />png
          <input type="radio" v-model="exportConfig.type" value="jpg" />jpg
          <input type="radio" v-model="exportConfig.type" value="bmp" />bpm
        </div>
        <div>
          <i class="iconfont" style="font-size:18px; padding-right:10px" >&#xe784;</i>
          <span>上传云端</span>
          <input type="radio" v-model="exportConfig.isUpload" :value="false" />否
          <input type="radio" v-model="exportConfig.isUpload" :value="true" />是
        </div>
        <div>
          <i class="iconfont tool-icon" style="font-size:18px; padding-right:10px" >&#xe604;</i>
          <span>输出大小</span>
          <span class="export-size">{{ imgSize }}</span>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import Loading from "../components/loadingBox";
import bgColorData from "../util/bgColorData";
import gaussBlur from "../util/gauss-blur";
import lineCanvas from "../util/lineCanvas";

export default {
  components: {
    Loading
  },
  data() {
    return {
      isLoading: false,
      showPopup: {
        showBgStyle: false,
        showTool: false,
        showAdjustEdge: false,
        showEraser: false
      },
      penPopup : 0,
      exportShow: false,
      bgColorData,
      bgColor: "",
      canvasBg: "",
      toolData: [
        {
          id: 0,
          icon: "&#xe63d;",
          title: "调整边缘",
          popup: "showAdjustEdge",
          fun: this.adjustEdge
        },
        {
          id: 1,
          icon: "&#xe603;",
          title: "橡皮擦",
          popup: "showEraser",
          fun: this.eraser
        },
        {
          id: 2,
          icon: "&#xe602;",
          title: "边缘平滑",
          popup: "showEdge",
          fun: this.auto
        },
        // {
        //   id: 3,
        //   icon: "&#xe62b;",
        //   title: "调整亮度",
        //   popup: "showLight",
        //   fun: this.adjustEdge
        // }
      ],
      lineWidth: 1,
      sigma: 1,
      radius: 1,
      popupLock: false,
      canvasStyle: {
        minWidth: "",
        maxHeight: "auto",
        maxWidth: "auto"
      },
      // 画笔画布 暂存媒介
      penCanvas: "",
      // 画笔配置
      penConfig: {
        type: "eraser", // eraser -> color : red;
        color: "rgba(8, 3, 24, 1)",
        lineWidth: 5,
        shadowBlur: 8,
        lineShadowColor: "rgba(8, 3, 24, 1)",
        rangeColor: this.$store.state.targetColor,
        range: [
          // 暗色系头发适用
          [
            [0.7, 0.7, 0.7],
            [1, 1, 1]
          ],
          [
            [0.6, 0.6, 0.6],
            [0.8, 0.8, 0.8]
          ],
          [
            [0.4, 0.4, 0.4],
            [0.6, 0.6, 0.6]
          ],
          [
            [0.15, 0.15, 0.15],
            [0.3, 0.3, 0.3]
          ],
          [
            [0.1, 0.1, 0.1],
            [0.2, 0.2, 0.2]
          ],
          [
            [0.05, 0.05, 0.05],
            [0.1, 0.1, 0.1]
          ],
          0.04,
          0.03,
          0.02,
          0.01
        ]
      },
      addConfig: {},
      exportConfig: {
        imgName: "Ynau_" + +new Date(),
        type: "png",
        isUpload: false
      },
      revokeArr: [],
      exportImgData: '',
      exportSize: '',
      rangeSize: 0,
      tempRange: [],
    };
  },
  methods: {
    // 初始化canvas
    initCanvas() {
      let canvas = this.$refs.noBgCan;
      let copy = this.$refs.copyCan;
      let canvasWidth = this.noBgData.width;
      let canvasHeight = this.noBgData.height;
      copy.width = canvasWidth;
      copy.height = canvasHeight;
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      let ctx = canvas.getContext("2d"); // 初始化画布
      let copyCtx = copy.getContext("2d");
      console.log(this.noBgData);
      copyCtx.putImageData(this.noBgData.data, 0, 0);
      ctx.putImageData(this.noBgData.data, 0, 0);
      return { canvas, copy };
    },
    bodyClick() {
      if (this.popupLock) return;
      this.popupChange();
    },
    // popup底部弹出框的变更
    popupChange(prop) {
      let temp = !this.showPopup[prop];
      for (let item in this.showPopup) {
        this.showPopup[item] = false;
      }
      this.$set(this.showPopup, prop, temp);
    },
    // 切换div的背景
    changeBgColor(color) {
      let canvasBox = this.$refs.canvasBox;
      if (color.bgImg) {
        this.bgColor = false;
        canvasBox.classList.add("transparent");
        return;
      }
      this.bgColor = color.color;
      canvasBox.classList.remove("transparent");
      canvasBox.style.background = color.color;
    },
    // 边缘调整画笔
    adjustEdge(type) {
      this.penConfig.type = "AdjustEdge";
      this.popupLock = true;
      this.popupChange(type);
      let canvas = this.$refs.noBgCan;
      let { width } = canvas.getBoundingClientRect();
      let radio = width / canvas.width;
      this.copyCanvasDraw(canvas, radio);
    },
    eraser(type) {
      this.penConfig.type = "eraser";
      this.popupLock = true;
      this.popupChange(type);
      let canvas = this.$refs.noBgCan;
      let { width } = canvas.getBoundingClientRect();
      let radio = width / canvas.width;
      this.copyCanvasDraw(canvas, radio);
    },
    // 画笔工具界面切换
    confirm() {
      this.popupChange();
      // 确定后 清除画笔
      let canvasBox = this.$refs.canvasBox;
      canvasBox.removeChild(this.penCanvas);
      let newData = this.getCanData(this.$refs.noBgCan);
      this.putCanData(this.$refs.copyCan, newData);
      this.penCanvas = "";
      this.popupLock = false;
      this.addConfig = {};
      // 重置边缘虚化参数（避免无法再次虚化）
      this.lineWidth = 1;
      this.sigma = 1;
      this.radius = 1;
    },
    // 取消
    cancel() {
      let copyData = this.getCanData(this.$refs.copyCan);
      this.putCanData(this.$refs.noBgCan, copyData);
      this.$refs.canvasBox.removeChild(this.penCanvas);
      this.penCanvas = "";
      this.addConfig = {};
      this.popupLock = false;
      this.popupChange();
    },
    changePen() {
      let penConfig = this.penConfig;
      // 内外参数合并，外负责调整数据，内负责获取画布
      penConfig = Object.assign(this.addConfig, penConfig);
      lineCanvas(penConfig,this,this.revokeArr);
    },
    popupPen(id) {
      let penAdjustName = 'penAdjust' + id;
      let penAdjust = this.$refs[penAdjustName];
      let top = parseInt(penAdjust.style.top);
      if(top <= 0 || String(top) === 'NaN') {
        penAdjust.style.top = '60px';
      }else {
        penAdjust.style.top = '-90px';
      }
    },
    revoke() {
      let canvas = this.$refs.noBgCan;
      let ctx = canvas.getContext('2d');
      let revokeData = this.revokeArr.pop();
      console.log(this.revokeArr.length);
      if(revokeData) {
        ctx.putImageData(revokeData,0,0);
      }else {
        this.$toast({
          message : '已撤回到初始状态'
        })
        return;
      }
    },
    // 调节画笔大小的展示
    showPenStyle() {
      let toolSize = this.$refs.toolSize;
      let son = this.$refs.toolSizeSon;
      clearTimeout(toolSize.timer);
      toolSize.style.width = (this.penConfig.shadowBlur + this.penConfig.lineWidth) / this.zoom + 'px';
      toolSize.style.height = (this.penConfig.shadowBlur + this.penConfig.lineWidth) / this.zoom + 'px';
      son.style.width = this.penConfig.lineWidth / this.zoom  + 'px';
      son.style.height = this.penConfig.lineWidth / this.zoom  + 'px';
      toolSize.style.display = 'block';
      toolSize.timer = setTimeout(() => {
        toolSize.style.display = 'none';
      }, 100);
    },
    // 公共函数 获取canvas数据 添加canvas数据
    getCanData(canvas) {
      let copyCtx = canvas.getContext("2d");
      return copyCtx.getImageData(0, 0, canvas.width, canvas.height);
    },
    putCanData(canvas, data) {
      let ctx = canvas.getContext("2d");
      ctx.putImageData(data, 0, 0);
    },
    auto(type) {
      this.popupChange(type);
      console.log(type);
    },
    edgeBlur() {
      let linePoint = [...this.$store.state.linePoint];
      // let cloneData = copyImageData(this.noBgData.data);
      let canvas = this.$refs.noBgCan;
      let cloneData = this.$refs.copyCan.getContext('2d').getImageData(0,0,canvas.width,canvas.height)
      let ctx = canvas.getContext("2d");
      ctx.putImageData(cloneData, 0, 0);
      // 处理得到模糊数据
      let blurData = gaussBlur(
        cloneData,
        linePoint,
        this.radius,
        this.lineWidth,
        this.sigma
      );
      ctx.putImageData(blurData, 0, 0);
    },
    // 防止数据污染
    copyImageData(imagedata) {
      return new ImageData(
        new Uint8ClampedArray(imagedata.data),
        imagedata.width,
        imagedata.height
      );
    },
    // 创建双层画布
    copyCanvasDraw(canvas, radio) {
      this.penCanvas = canvas.cloneNode(true); // 克隆一个新节点
      this.penCanvas.id = "penCanvas";
      let canvasBox = this.$refs.canvasBox;
      canvasBox.appendChild(this.penCanvas);
      // let { x, y, width, height } = canvas.getBoundingClientRect();
      this.penCanvas.style.position = "absolute";
      this.penCanvas.style.left = 0 + "px";
      this.penCanvas.style.top = 0 + "px";
      let ctx2 = this.penCanvas.getContext("2d");
      this.penCanvas.style.opacity = 0.8;

      this.addConfig = {
        canvas,
        can2: this.penCanvas,
        ctx2,
        zoomScale: radio
      };
      let penConfig = this.penConfig;
      // 内外参数合并，外负责调整数据，内负责获取画布
      penConfig = Object.assign(this.addConfig, penConfig);

      lineCanvas(penConfig,this,[]);
    },
    exportCanShow() {
      this.exportShow = true; 
      this.exportConfig.imgName = 'Ynau_' + +new Date();
       let canvas = this.$refs.noBgCan;
      let ctx = canvas.getContext("2d");
      let originData = ctx.getImageData(0,0,canvas.width,canvas.height);
      let copyCtx = this.$refs.copyCan.getContext('2d');
      copyCtx.putImageData(originData,0,0);
      if (this.bgColor) {
        ctx.fillStyle = this.bgColor;
        // 这里不能用putImage的方法，必须使用fillRect才能完成 globaCompositeOperation
        ctx.globalCompositeOperation = "destination-over";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }
      this.exportImgData = canvas.toDataURL(this.exportConfig.type);
      this.exportSize = this.dataURLtoBlob(this.exportImgData).size;
      // 恢复无背景的画布
      originData = copyCtx.getImageData(0,0,canvas.width,canvas.height);
      ctx.putImageData(originData,0,0);
    },
    exportCan(imgdata) {
     
      this.download(imgdata,this.exportConfig.type, this.exportConfig.imgName );
      this.exportShow = false;

      this.$notify({ type: "success", message: "保存成功" });

      if (this.exportConfig.isUpload) {
        console.log("上传成功");
      }

    },
    dataURLtoBlob (dataURL = '') {
      let arr = dataURL.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = window.atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new window.Blob([u8arr], {type: mime})
    },
    download(imgdata, type, filename) {
      //设置保存图片的类型
      //将mime-type改为image/octet-stream,强制让浏览器下载
      var fixtype = function(type) {
        type = type.toLocaleLowerCase().replace(/jpg/i, "jpeg");
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return "image/" + r;
      };
      imgdata = imgdata.replace(fixtype(type), "image/octet-stream");

      //将图片保存到本地
      var saveFile = function(data, filename) {
        var link = document.createElement("a");
        link.href = data;
        link.download = filename;
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent( "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null );
        link.dispatchEvent(event);
      };
      filename += "." + type;
      saveFile(imgdata, filename);
    },
    stepperChange(value) {
      this.$toast({
        message : this.rangeSize,
        position : 'top'
      });
      console.log(this.rangeSize, value)
    },
    initPenConfig() {
      this.penConfig.lineWidth = Math.round(this.penConfig.lineWidth * this.zoom);
      this.penConfig.shadowBlur = Math.round(this.penConfig.shadowBlur * this.zoom);
    }
  },

  computed: {
    noBgData() {
      return this.$store.state.noBgCan;
    },
    zoom () {
      let {noBgCan,canvasBox} = this.$refs;
      return noBgCan.width / canvasBox.offsetWidth;
    },
    // eslint-disable-next-line vue/return-in-computed-property
    imgSize() {
      if(this.exportSize === '') { return '' }
      else if (this.exportSize < 1024) { return this.exportSize + 'B' }
      else if (this.exportSize < 1024 * 1024) { return (this.exportSize / 1024).toFixed(2) + 'KB' }
      else if (this.exportSize < 1024 * 1024 *1024) { return (this.exportSize / 1024 / 1024).toFixed(2) + 'MB' }
    }
  },
  mounted() {
    if(!this.noBgData.data){
      this.$router.push('/');
      return;
    }
    this.initCanvas();
    this.initPenConfig();
  }
};
</script>


<style scoped>
.moreTool {
  display: flex;
  height: calc(100% - 46px);
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 56px;
  align-items: center;
}

.container .canvasBox {
  box-shadow: 0 0 9px #999;
}

.container .canvasBox.transparent {
  background: #fff !important;
  background-image: linear-gradient(
      45deg,
      #ddd 25%,
      transparent 25%,
      transparent 75%,
      #ddd 75%,
      #ddd
    ),
    linear-gradient(
      45deg,
      #ddd 25%,
      transparent 25%,
      transparent 75%,
      #ddd 75%,
      #ddd
    ) !important;
  background-image: -webkit-linear-gradient(
      45deg,
      #ddd 25%,
      transparent 25%,
      transparent 75%,
      #ddd 75%,
      #ddd
    ),
    -webkit-linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd
          75%, #ddd);
  background-image: -moz-linear-gradient(
      45deg,
      #ddd 25%,
      transparent 25%,
      transparent 75%,
      #ddd 75%,
      #ddd
    ),
    -moz-linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd
          75%, #ddd);
  background-image: -o-linear-gradient(
      45deg,
      #ddd 25%,
      transparent 25%,
      transparent 75%,
      #ddd 75%,
      #ddd
    ),
    -o-linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd
          75%, #ddd);
  background-size: 30px 30px !important;
  background-position: 0 0, 15px 15px !important;
}

.container .canvasBox canvas {
  display: block;
  position: relative;
  z-index: 2;
  min-width: 75vw;
  max-height: calc(98vh - 146px);
  max-width: 90vw;
}

/* 操作区域 */
.operation {
  position: relative;
}

.operation .footer {
  position: absolute;
  left: -50vw;
  bottom: 0;
  width: 100vw;
  height: 55px;
  line-height: 55px;
  background: #fff;
  text-align: center;
}

.operation .footer .buttonInfo {
  position: absolute;
  z-index: 3;
  width: 100vw;
  height: auto;
  padding-bottom: 55px;
  background-color: #fff;
  bottom: 0;
  transition: all 0.3s;
}

.tool-ajust-box {
  background: #fff;
  position: relative;
  display: flex;
  justify-content: space-around;
}

.pen-adjust {
  position: absolute;
  z-index: -1;
  width: 100vw;
  border-radius: 15px 15px 0 0;
  padding: 10px 0;
  box-sizing: border-box;
  border-bottom: #eee 1px solid;
  top: -90px;
  background: white;
  transition: top .3s;
}

.pen-adjust > div{
  display: flex;
    height: 36px;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
}

.pen-adjust  > div > span {
  text-align: left;
  line-height: 30px;
  width: 80px;
}

.operation .footer .popup-tool {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 0 5px 0;
  justify-content: space-around;
  border-bottom: 1px #ccc solid;
}

.operation .footer .tool-edge-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.operation .footer .tool-edge-box > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 15px;
  border-bottom: 1px solid #ddd;
  height: 80px;
}

.operation .footer .popup-tool-item {
  flex : 1;
  min-width: 25%;
}

.operation .footer .popup-tool-item .cell-container {
  display: flex;
  flex-direction: column;
}

.operation .footer .popup-tool-item .cell-container > span {
  height: 30px;
  line-height: 30px;
}

.operation .footer .popup-tool-item .cell-container > i {
  height: 35px;
  line-height: 35px;
}

.operation .footer .bg-style-box {
  display: flex;
  overflow: scroll;
  flex-wrap: nowrap;
  margin-right: 14px;
  padding: 0 8px;
  border-bottom: 1px #ccc solid;
}

.operation .footer .bg-style-box::-webkit-scrollbar {
  display: none;
}

.operation .footer .bg-style-box .bg {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  box-sizing: border-box;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.operation .footer .bg-style-box .bg-style {
  margin: 8px 8px;
  margin-top: 14px;
  line-height: 20px;
}

.operation .footer .bg-style-box .bg-style span {
  display: inline-block;
  line-height: 20px;
  margin-top: 5px;
}

.operation .footer .buttonList {
  display: flex;
  flex-direction: row;
  background: #fff;
  position: relative;
  z-index: 999;
  justify-content: space-around;
}

.operation .footer .buttonList span {
  flex:1;
}

.exportCard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 50px;
  width: 100%;
}

.exportCard div {
  margin: 10px 0;
}

.exportCard div:nth-child(2) input {
  width: 20px;
  vertical-align: -2px;
}

.exportCard div .exportInput {
  outline: none;
  border: none;
  padding: 5px 15px;
  border-bottom: 1px solid #eee;
}

.exportCard div span {
  margin-right: 10px;
}

.container .tool-size {
  position: absolute;
  box-shadow: 0 0 5px inset #ccc;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px white dashed;
}

.container .tool-size .tool-size-slider {
  position: absolute;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid white;
}

.iconfont.tool-icon:active {
  color: #1989FA;
}

</style>